<template>
    <div class="container">
        <div class="plus btn" @click="plus">+</div>
        <transition name="fade">
            <div v-show="number>0?true:false" class="number">{{number}}</div>
        </transition>
        <transition name="fade">
            <div class="minus btn" @click="minus" v-show="number>0?true:false">-</div>
        </transition>
        <!-- 菜品最大上线模态框 -->
        <modal class="modal" v-if="showModal" @close="showModal = false">
            <span slot="header"></span>
            <span slot="body">
                只能选择{{maxquantity}}件菜品！
            </span>
            <div slot="footer">
                <button class="modal-default-button" @click="showModal = false">
                    OK
                </button>
            </div>
        </modal>
        <!-- 菜品已售罄模态框 -->
        <modal class="modal" v-if="showModal2" @close="showModal2 = false">
            <span slot="header"></span>
            <span slot="body">
                 该菜品已售罄，请选择其它菜品！
            </span>
            <div slot="footer">
                <button class="modal-default-button" @click="showModal2 = false">
                    OK
                </button>
            </div>
        </modal>
    </div>
</template>

<script type="text/ecamscript-6">
import modal from "@/base/modal/modal";
export default {
    data() {
        return {
            number: this.initNumber,
            showModal: false,
            showModal2: false,
            maxquantity: 100,
            menuStatus: this.status
        }
    },
     components: {
        modal
    },
    props: {
        initNumber: {
            type: Number,
            default: 0
        },
        status:"Open"
    },
    methods: {
        plus() {
            if(this.number > this.maxquantity || this.number == this.maxquantity){
                this.showModal = true
            }else if(this.menuStatus == "Close"){
                this.showModal2 = true
            }else{
                this.number = this.number + 1
                this.$emit('change', this.number)
            }
        },
        minus() {
            if (this.number >= 1) {
                this.number = this.number - 1
                this.$emit('change', this.number)
            }
        }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~commom/stylus/mixin'
.container
    display flex
    flex-direction row-reverse
    justify-content flex-start
    .btn
        flex 0 0 20px
        height 20px
        border-radius 10px
        font-size 15px
        line-height 18px
        text-align center
        extent-click()
        &.plus
            background-color #f20c00
            color #ffffff
        &.minus
            background-color #ffffff
            border 1px solid #cccccc
            color #000000
            line-height 17px
    .number
        color #333333
        font-size 13px
        height 20px
        line-height 20px
        padding 0 7px
.fade-enter-active, .fade-leave-active
    transition all 0.3s
.fade-enter, .fade-leave-to
    transform translateX(100%)
    opacity 0
.modal
    .modal-default-button
        float right
        color #fff
        background-color #4aae9b
        border 1px solid #4aae9b
        border-radius 2px
        padding 6px 12px
        background-color #4dae9b
        extent-click()
</style>
